<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" @selection-change="e => selection = e">
    </ex_super_table_page>
    <ex_super_dialog_form ref="editDialog" v-bind="editDialog" @afterSubmitSuccess="reload()">
    </ex_super_dialog_form>
  </div>
</template>
<script>
import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
import emitOnFunction from '@/mixin/emit-on-function';

import cascader_address_select from '@/component/tms/cascader_address_select'

let emitKey = 'tms>remote_site_config'
export default {
  title: "title_remote_site_config",
  mixins: [superTablePageFunction, emitOnFunction(emitKey), page_table_model_manage],
  components: { cascader_address_select },
  data() {
    return {
      selection: [],
      option: {
        search: {
          model: [
            { key: 'tmsDistanceType', label: 'label_remote_type', type: 'select', enum: 'TmsDistanceTypeEnum', },
            { label: "label_zip_code", key: "zipCode", },
          ],
        },
        action: [
          {
            label: { _key: "label_new_any", i18n: true, type: "title_remote_site_config" }, attrs: { icon: "el-icon-plus" },
            auth: 'tms_remote_site_edit',
            attrs: { type: "primary" },
            click: () => {
              this.$refs.editDialog.showNew({
                title: this.$tt({ _key: "label_new_any", i18n: true, type: "title_remote_site_config" }),
                data: {},
                onlySetData: true,
              })
            }
          },
        ],
        table: {
          url: "/tms-api/base/TmsGeographyDistanceInfoRpc/selectByPage.json",
          model: this.init_table_model(),
        }
      },
      editDialog: {
        customClass: 'dialog_auto',
        submitUrl: '/tms-api/base/TmsGeographyDistanceInfoRpc/saveUpdate.json',
        detailUrl: '/tms-api/base/TmsGeographyDistanceInfoRpc/detail.json',
        form: {
          itemClass: "form_item_default", inputClass: "form_input_default",
          model: [
            { key: 'tmsDistanceType', label: 'label_remote_type', type: 'select', enum: 'TmsDistanceTypeEnum' },
            {
              key: "regionId", label: 'label_place',
              render: (h, { data, item }) => {
                const countryCode = data['countryCode']
                const zipCode = data['zipCode']
                // const countryName = data['countryName']
                const province = data['province']
                const city = data['city']
                const area = data['area']
                return h(cascader_address_select, {
                  class: "form_input_default",
                  props: {
                    countryCode, province, city, county: area, zipCode, checkStrictly: true,
                    disabledItemCall: (item, level,) => {
                      return level == 0
                    }
                  },
                  on: {
                    'update:countryCode': e => this.$set(data, 'countryCode', e),
                    'update:countryName': e => this.$set(data, 'countryName', e),
                    'update:province': e => this.$set(data, 'province', e),
                    'update:city': e => this.$set(data, 'city', e),
                    'update:county': e => this.$set(data, 'area', e),
                    'update:zipCode': e => this.$set(data, 'zipCode', e),
                    "update:regionId": e => this.$set(data, 'regionId', e),
                  },
                })
              }
            }
          ],
          rules: {
            'tmsDistanceType': [{ required: true, message: this.$tt('tip_can_no_empty'), }],
            'regionId': [{ required: true, message: this.$tt('tip_can_no_empty'), }],
          },
        }
      },
    };
  },
  methods: {
    option_table_model() {
      return [
        { type: 'selection', clickToggle: true, },
        {
          key: 'countryCode', label: 'label_country', 'min-width': 140, 'show-overflow-tooltip': true,
          formatter: (r, c, v) => this.$formatNameCode(r.countryName, r.countryCode)
        },
        {
          key: 'tmsDistanceType', label: 'label_remote_type', 'min-width': 130,
          formatter: (r, c, v) => this.$enumShow(v, "TmsDistanceTypeEnum")
        },
        { key: 'province', label: 'label_province', 'min-width': 130, },

        { key: 'city', label: 'label_city', 'min-width': 130, },

        { key: 'area', label: 'label_county', 'min-width': 130, },

        { key: 'zipCode', label: 'label_zip_code', 'min-width': 130, },

        {
          type: 'operate', width: 160, operate: [
            {
              label: 'label_edit',
              auth: 'tms_remote_site_edit',
              click: (row) => {
                this.$refs.editDialog.showNew({
                  title: this.$tt({ _key: "label_edit_any", i18n: true, type: "title_remote_site_config" }),
                  params: { id: row.id },
                })
              }
            },
            {
              label: 'label_delete',
              auth: 'tms_remote_site_delete',
              type: "confirm-button", buttonClass: "button_text_danger", confirmButtonType: 'danger',
              url: '/tms-api/base/TmsGeographyDistanceInfoRpc/remove.json', message: 'text_confirm_sure_delete',
              params: (row) => { return { "id": row["id"] } }, done: ['reload', 'tip']
            },
          ],
        }
      ]
    },

  }
};

</script>
<style></style>

